<template>
    <div class="box">
        <avue-crud ref="crud"
                   v-model="form"
                   :page="page"
                   :data="tableData"
                   :table-loading="tableLoading"
                   :option="tableOption"
                   :before-open="beforeOpen"
                   @on-load="getList"
                   @search-change="searchChange"
                   @refresh-change="refreshChange"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   @row-update="handleUpdate"
                   @row-save="handleSave"
                   @row-del="rowDel">
            <template slot="menu" slot-scope="scope">
                <el-button :size="scope.size" icon="el-icon-plus"
                           @click="$refs.imgDia.openDia(scope.row.id)" type="text">添加图片
                </el-button>
                <el-button :size="scope.size" icon="el-icon-tickets"
                           @click="$refs.infoDia.openDia(scope.row.id)" type="text">商品详情
                </el-button>
            </template>
            <template slot="state" slot-scope="scope">
                <el-switch
                        style="display: block"
                        @change="change(scope.row)"
                        v-model="scope.row.state"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="上架"
                        inactive-text="下架"
                        active-value="01"
                        inactive-value="02">
                </el-switch>
            </template>
            <template slot-scope="{type,disabled}" slot="materialListForm">
                <div v-for="(item,i) in form.materialList" style="display: flex;margin-top: 5px">
                    <el-select style="width: 150px" @change="initMaterialList()" v-model="item.val" placeholder="请选择">
                        <el-option v-for="material in materialList"
                                   :key="material.value"
                                   :label="material.label"
                                   :value="material.value"
                                   :disabled="material.disabled">
                        </el-option>
                    </el-select>
                    <el-input-number style="margin-left: 5px;width: 150px" v-model="item.num" :min="1"
                                     :precision="0"></el-input-number>
                    <el-button style="margin-left: 5px" v-if="form.materialList.length>1" type="primary"
                               icon="el-icon-minus" circle @click="delMaterial(i)"></el-button>
                    <el-button style="margin-left: 5px" type="primary" icon="el-icon-plus" circle
                               @click="addMaterial()"></el-button>

                </div>
            </template>
        </avue-crud>
        <imgDia ref="imgDia"></imgDia>
        <infoDia ref="infoDia"></infoDia>
    </div>
</template>

<script>
    import {tableOption} from '@/js/sys/user/list.js'
    import tableMixins from "@/mixins/tableMixins.vue"

    export default {
        name: "list",
        mixins: [tableMixins],
        components: {
            'imgDia': () => import('@/components/goods/imgDia.vue'),
            'infoDia': () => import('@/components/goods/infoDia.vue')
        },
        data() {
            return {
                //访问接口前缀
                url: "info-goods",
                // 表格参数
                tableOption: {
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    indexWidth: 50,
                    stripe: true,
                    align: 'center',
                    searchMenuSpan: 6,
                    labelWidth: 120,
                    height: '600px',
                    calcHeight: 400,
                    dialogWidth: 900,
                    menuWidth: 300,
                    menuAlign: 'center',
                    column: [
                        {
                            prop: 'id',
                            label: 'ID',
                            hide: true,
                            addDisplay: false,
                            editDisplay: false
                        }, {
                            prop: 'name',
                            label: '商品名称',
                            type: 'input',
                            overHidden: true,
                            minWidth: 60,
                            maxlength: 20,
                            search: true,
                            rules: [{
                                required: true,
                                message: '请输入',
                                trigger: 'blur'
                            }]
                        },
                        {
                            prop: 'price',
                            label: '售价',
                            type: 'number',
                            precision: 2,
                            overHidden: true,
                            minWidth: 20,
                            rules: [{
                                required: true,
                                message: '请输入',
                                trigger: 'blur'
                            }]
                        },
                        {
                            prop: 'says',
                            label: '话语',
                            type: 'input',
                            span: 24,
                            overHidden: true,
                            maxlength: 255,
                            minWidth: 60,
                        },
                        {
                            prop: 'use',
                            label: '用途',
                            type: 'select',
                            span: 24,
                            overHidden: true,
                            maxlength: 255,
                            minWidth: 60,
                            dicUrl: "/common/getItem/use",
                            rules: [{
                                required: true,
                                message: '请输入',
                                trigger: 'blur'
                            }]
                        },
                        {
                            prop: 'packaging',
                            label: '包装',
                            type: 'input',
                            span: 24,
                            overHidden: true,
                            maxlength: 255,
                            minWidth: 60,
                        },
                        {
                            prop: 'distributionNote',
                            label: '配送说明',
                            type: 'input',
                            span: 24,
                            overHidden: true,
                            maxlength: 255,
                            minWidth: 60,
                        },
                        {
                            prop: 'category',
                            label: '类别',
                            type: 'select',
                            slot: true,
                            minWidth: 50,
                            overHidden: true,
                            dicUrl: "/common/getItem/goods_category",
                            search: true,
                            rules: [{
                                required: true,
                                message: '请输入',
                                trigger: 'blur'
                            }]
                        },
                        {
                            prop: 'state',
                            label: '状态',
                            type: 'radio',
                            slot: true,
                            minWidth: 50,
                            overHidden: true,
                            search: true,
                            dicUrl: "/common/getItem/goods_state",
                            rules: [{
                                required: true,
                                message: '请输入',
                                trigger: 'blur'
                            }]
                        },
                        {
                            prop: 'materialList',
                            label: '材料',
                            hide: true,
                            span: 18,
                            type: 'input',
                            slot: true,
                            overHidden: true,
                            rules: [{
                                required: true,
                                message: '请输入',
                                trigger: 'blur'
                            }]

                        },
                    ]
                },
                //弹框显示判断
                dialogVisible: false,
                //可选材料集合
                materialList: [],
                form: {
                    materialList: [
                        {val: '', num: 1},
                    ],
                }
            }
        },
        created() {
            this.init();
        },
        methods: {

            /**
             * 新增保存
             * @param row 行数据
             * @param done 完成回调
             * @param loading 加载回调
             */
            handleSave: function (row, done, loading) {
                //设置数据
                this.$HttpService.post("/" + this.url + "/" + this.addUrl, this.delNotField(this.del$(row), "add")).then(res => {
                    this.$message.success('新增成功');
                    this.getList();
                    done();
                }).catch(() => {
                    loading();
                })
            },
            //弹框打开前的函数
            beforeOpen(done,type){
                if(type=='edit'){
                    this.initMaterialList()
                }else if(type=='add'){

                    this.form=this.$options.data().form;
                    this.form.materialList[0].val = this.materialList[0].value;
                }
                done();
            },

            //删除一个材料
            delMaterial(i) {
                this.form.materialList.splice(i, 1);
                this.initMaterialList();
            },

            //加一个材料
            addMaterial() {
                let temp = this.materialList.filter(x => !x.disabled);
                if (temp.length > 0) {
                    this.form.materialList.push({val: temp[0].value, num: 1});
                    this.initMaterialList();
                } else {
                    this.$message.error('没有可选材料！');
                }

            },

            //初始化材料集合
            initMaterialList() {
                this.materialList.forEach(x => {
                    x.disabled = this.form.materialList.filter(y => y.val == x.value).length > 0;
                })
            },


            //修改用户状态
            change(row) {
                this.$HttpService.post("/"+this.url+"/updateState/" + row.id + "/" + row.state);
            },


            init() {
                //获取可选材料集合
                this.$HttpService.get("/common/getItem/material").then(res => {
                    this.materialList = res;
                    this.form.materialList[0].val = this.materialList[0].value;
                    this.initMaterialList();
                })
            }
        }
    }
</script>

<style scoped>

</style>
